<template>
    <div>
       
        <Card style="width:100%;margin-bottom:15px;">
            <div>
                <Row>
                    <Col span="6">
                        <Form :label-width="80">
                           <FormItem label="选择变电站" style="margin-bottom:0px;">
                                <Select v-model="tsname" @on-change="getgrouplist">
                                    <Option v-for="(item,key) in tslist" :value="item.name" :key="key">{{ item.name }}</Option>
                                </Select>
                           </FormItem>
                        </Form>
                    </Col>
                    <Col span="6">
                        <Form :label-width="80">
                           <FormItem label="选择编组" style="margin-bottom:0px;">
                                <Select v-model="model1" :disabled="disabled">
                                    <Option v-for="(item,key) in devlist" :value="item.id" :key="key">{{ item.name }}</Option>
                                </Select>
                           </FormItem>
                        </Form>
                    </Col>
                    <Col span="6">
                        <Form :label-width="80">
                            <FormItem label="时间段:" style="margin-bottom:0px;">
                                <DatePicker v-model="daterange" format="yyyy-MM-dd" type="daterange" split-panels placeholder="选择时间" style="width: 100%"></DatePicker>
                            </FormItem>
                        </Form>
                    </Col>
                    <Col span="6" style="padding-left:30px;">
                        <Button type="primary" @click="handleSubmit('formInline')">查询</Button>
                    </Col>
                </Row>
            </div>
        </Card>
        <div id="historyChart">

        </div>
    </div>
</template>
<script>
import util from '../../util/util'
export default {
    data(){
        return {
            tslist:[],
            disabled:true,
            tsname:'',
            myChart:Object,
            daterange:[],
            model1:'',
            devlist:[],
            title:'历史温度',
            legend:['电压互感器01','断路器01','电缆出线气室01'],
            xAxis:['6-14','6-15','6-16'],
            datamap:{'电压互感器01':['40','30','45'],'断路器01':['21','33','41'],'电缆出线气室01':['11','22','44']}
        }
    },
    created(){
        try{
            this.disabled = false;
            this.devlist = this.$store.state.searchforItem.devlist?this.$store.state.searchforItem.devlist:[];
            this.model1 = this.$store.state.searchforItem.group?this.$store.state.searchforItem.group:'';
            this.tsname = this.$store.state.searchforItem.tsname?this.$store.state.searchforItem.tsname:'';
            this.daterange = this.$store.state.searchforItem.daterange?this.$store.state.searchforItem.daterange:'';
            this.handleSubmit();
        }catch(e){
            this.model1 = '';
            this.tsname = '';
            this.daterange = '';
        }
        this.get_Ts_Type_Group();
    },
    mounted(){
        this.$nextTick(()=>{
            this.initChart('historyChart',[],[],{});
        });
    },
    methods:{
        get_Ts_Type_Group:function(tsname){
            let vm = this;
            util.ajax({
                method: 'get',
                url: '/util-api-sgdlist/?tsname='+tsname
            })
            .then(function (response) {
                if(response.status==200){
                    if(!tsname){
                        vm.tslist = [];
                        for(let i = 0;i<response.data.substation.length;i++){
                            vm.tslist.push(response.data.substation[i]);
                        }
                    }else{
                        vm.disabled = false;
                        vm.devlist = [];
                        if(response.data.device_group.length>0){
                            vm.model1 = response.data.device_group[0].name;
                            for(let i = 0;i<response.data.device_group.length;i++){
                                vm.devlist.push(response.data.device_group[i]);
                            }
                        }
                    }
                }else{
                    
                }
            })
            .catch(function(err){
                vm.$Message.info(err.response.data.detail);
            })
        },
        getgrouplist:function(option){
            this.get_Ts_Type_Group(option);
        },
        handleSubmit:function(){
            if(this.tsname==''){
                this.$Message.info('请选择变电站');
                return false;
            }
            if(this.daterange==[]){
                this.$Message.info("请选择时间段");
                return false;
            }
            if(this.model1==''){
                this.$Message.info("请选择设备编组");
                return false;
            }
            let date1 = new Date(this.daterange[0]);
            let date2 = new Date(this.daterange[1]);
            let yy1 = date1.getFullYear();
            let mm1 = (date1.getMonth()+1)>=10?(date1.getMonth()+1):('0'+(date1.getMonth()+1));
            let dd1= date1.getDate()>=10?date1.getDate():('0'+date1.getDate());
            let yy2 = date2.getFullYear();
            let mm2 = (date2.getMonth()+1)>=10?(date2.getMonth()+1):('0'+(date2.getMonth()+1));
            let dd2= date2.getDate()>=10?date2.getDate():('0'+date2.getDate());
            let senddate1 = yy1+'-'+mm1+'-'+dd1;
            let senddate2 = yy2+'-'+mm2+'-'+dd2;
            this.$store.commit('searchforItem',{tsname:this.tsname,daterange:[this.daterange[0],this.daterange[1]],group:this.model1,devlist:this.devlist});
            this.getChartData(this.model1,senddate1,senddate2);
            //this.myChart.clear();
            //this.initChart('historyChart');
            //this.$store.commit('updateHistorySearchItem',this.model1);
        },
        getChartData:function(group_index,startTime,stoptime){
            let vm = this;
            let group_name = '';
            for(let i = 0; i<vm.devlist.length;i++){
                if(group_index==vm.devlist[i].id){
                    group_name = vm.devlist[i].name;
                    break;
                }
            }
            util.ajax({
                method: 'get',
                url: '/api-record/group_history?group_index='+group_index+'&start_datetime='+startTime+'&end_datetime='+stoptime
            })
            .then(function (response) {
                if(response.status==200){
                    vm.title = startTime +' 至 '+ stoptime+ ' ' + group_name +' 历史温度';
                    vm.myChart.clear();
                    vm.initChart('historyChart',response.data.y_series,response.data.x_series,response.data.env);
                }else{
                    vm.$Message.error('获取数据失败');
                }
            })
            .catch(function(err){
                vm.$Message.error('网络错误');
            })
        },
        initChart:function(id,datamap,xAxis,env){
            //let echarts = require('echarts');
            let echarts = require('echarts/lib/echarts');
            // 引入柱状图
            require('echarts/lib/chart/line');
            require('echarts/lib/chart/bar');
            require("echarts/lib/component/grid");
            require("echarts/lib/component/title");
            require("echarts/lib/component/markPoint");

            // 引入提示框和标题组件
            require('echarts/lib/component/toolbox');
            require('echarts/lib/component/tooltip');
            require('echarts/lib/component/legend');
            require('echarts/lib/component/title');
            require("echarts/lib/component/dataZoom");
            this.myChart = echarts.init(document.getElementById(id));
            let serieslist = [];
            let legendd = [];
            for(let i in datamap){
                let item = {
                    name:datamap[i].device_name,
                    type:'line',
                    data:datamap[i].data,
                    smooth:true
                }
                legendd.push(datamap[i].device_name);
                
                serieslist.push(item);
            }
            let envitem = {
                name:env.name,
                type:'line',
                data:env.data,
                smooth:true
            };
            serieslist.push(envitem);
            let option = {
                title: {
                    text: this.title,
                    right:'center'
                },
                tooltip: {
                    trigger: 'axis'
                },
                toolbox: {
                    feature: {
                        magicType: {
                            type: ['line', 'bar']
                        }
                    }
                },
                legend: {
                    data:legendd,
                    top:25
                },
                xAxis:  {
                    type: 'category',
                    boundaryGap: false,
                    data: xAxis
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} °C'
                    }
                },
                dataZoom: [
                    {
                        show: true,
                        realtime: true,
                        start: 0,
                        end: 100
                    },
                    {
                        type: 'inside',
                        realtime: true,
                        start: 0,
                        end: 100
                    }
                ],
                series: serieslist
            };
            this.myChart.setOption(option);
            window.addEventListener('resize',() => {
                this.myChart.resize();
            })
        }
    }
}
</script>
<style scoped>
    .ivu-form .ivu-form-item-label{
        font-size: 16px;
    }
    #historyChart{
        width: 100%;
        height: 500px;
    }
</style>
